
<template>
  <view class="ticket-shop">
    <!-- 顶部搜索栏 -->
     <view style="background: #ffffff;padding: 20rpx">
       <u-search
           v-model="keyword"
           placeholder="请输入搜索内容"
           @search="onSearch"
           :show-action="false"
           bg-color="#f5f5f5"
       />
     </view>
    <view style="background: #ffffff">
      <u-dropdown active-color="#f56c6c">
        <u-dropdown-item v-model="searchParams.sort" :title="getSortTitle" :options="sortOptions"></u-dropdown-item>
      </u-dropdown>
    </view>
    <!-- 列表区 -->
    <scroller-view
      :list="list"
      :finished="finished"
      @load="loadMore"
      class="ticket-list"
    >
      <view
        v-for="item in list"
        :key="item.id"
        class="ticket-item"
        @click="goDetail(item.id)"
      >
        <image :src="item.cover" class="ticket-img" mode="aspectFill" />
        <view class="ticket-info">
          <view class="ticket-top">
            <view class="ticket-title">
              {{ item.name }}
              <text v-if="item.level" class="ticket-level">{{ item.level }}</text>
            </view>
            <view class="ticket-desc ellipsis">{{ item.description }}</view>
            <view class="ticket-address">
              <view>
                <u-icon name="map-fill" size="28" color="#999" />
              </view>
              <text class="ellipsis"> {{ item.address }}</text>
            </view>
          </view>
          <view class="ticket-bottom">
            <text class="ticket-sale">{{ item.saleText }}</text>
            <text class="ticket-price">
              <text class="old-price" v-if="item.oldPrice">￥{{ item.oldPrice }}</text>
              ￥{{ item.price }}<text class="price-tip">起</text>
            </text>
          </view>
        </view>
      </view>
    </scroller-view>
  </view>
</template>
<script>
export default {
  name: "shop",
  data() {
    return {
      keyword: "",
      searchParams: {
        sort: ''
      },
      sortOptions: [
        { label: "综合排序", value: "" },
        { label: "价格从低到高", value: "price,desc" },
        { label: "价格从高到低", value: "price,asc" },
        { label: "销量从高到低", value: "sale_count,desc" },
        { label: "销量从低到高", value: "sale_count,asc" },
      ],
      list: [],
      pageNo: 1,
      pageSize: 10,
      finished: false,
      loading: false
    };
  },
  computed: {
    getSortTitle() {
      if (this.searchParams.sort) {
        let option = this.sortOptions.find(item => item.value === this.searchParams.sort) || { label: "综合排序" }
        return option.label
      }
      return "综合排序"
    }
  },
  onLoad() {
    this.getList(true);
    // 可在此处请求分类
  },
  methods: {
    onSearch() {
      this.pageNo = 1;
      this.getList(true);
    },
    loadMore() {
      if (!this.finished && !this.loading) {
        this.pageNo++;
        this.getList();
      }
    },
    getList(reset = false) {
      this.loading = true;
      uni.showLoading({
        title: '加载中'
      })
      this.$api.getTicketShopPage({
        ...this.searchParams,
      }).then(res => {
        let data = res.list
        if (reset) {
          this.list = [];
        }
        this.list = this.list.concat(data.map(item => {
          let key = 'sale_count'
          if (item.virtual_sale_count) {
            key = 'virtual_sale_count'
          }
          return {
            ...item,
            saleText: (item[key] > 10000 ? (item[key] / 10000).toFixed(1) + '万+' : item[key] || 0 + '人') + '购买',
            price: item.price || 0,
            oldPrice: item.original_price || 0,
            level: item.level
          }
        }));
        this.finished = data.length < this.pageSize;
      })
    },
    goDetail(id) {
      uni.navigateTo({
        url: '/pages/ticket/detail?shopId=' + id
      });
    }
  }
};
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.ticket-shop {
  background: #f5f5f5;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .u-dropdown__menu__item {
    flex: initial !important;
    width: 30%;
  }
}
.ticket-list {
  flex-grow: 1;
  margin-top: 20rpx;
}
.ticket-item {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.ticket-img {
  flex-shrink: 0;
  width: 200rpx;
  height: 240rpx;
  border-radius: 16rpx;
  object-fit: cover;
  margin-right: 20rpx;
}
.ticket-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.ticket-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  display: flex;
  align-items: center;
}
.ticket-level {
  font-size: 22rpx;
  color: #4e8ef7;
  margin-left: 10rpx;
  font-weight: bold;
}
.ticket-desc {
  color: #4e8ef7;
  font-size: 28rpx;
  margin: 16rpx 0;
}
.ticket-address {
  color: #999;
  font-size: 24rpx;
  display: flex;
}
.ticket-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 8rpx;
}
.ticket-sale {
  color: #999;
  font-size: 22rpx;
}
.ticket-price {
  color: #f56c6c;
  font-size: 32rpx;
  font-weight: bold;
}
.old-price {
  color: #bbb;
  font-size: 24rpx;
  text-decoration: line-through;
  margin-right: 8rpx;
}
.price-tip {
  font-size: 20rpx;
  color: #f56c6c;
}
</style>
